<script setup>
import { reactive, ref, toRefs, watch } from 'vue'
import { getTimeSplit } from '../service/processcontrol'
const props = defineProps({
  types: {
    //重车过磅或者空车回皮 0：重车过磅；1：空车回皮
    type: String
  },
  carModelData: {
    type: Object
  },
  isError: {
    type: Boolean,
    default: false
  },
  cheatStatus: {
    type: String
  },
  carplate: {
    type: String
  }
})
const { types, carModelData, isError, cheatStatus, carplate } = toRefs(props)
const timeminutes = ref(null)
const timeSplit = ref(null)
const setTimerSplit = () => {
  let deptObj = window._info || {} //另一个项目传过来的数据
  const info = window._deptObj || {}
  let params = {
    TenantID: info.TenantID, //租户编号
    OrgId: info.OrgId, //机构编号
    DeptCode: info.DeptCode, //项目编号
    VIN: carplate.value //车牌号
  }
  getTimeSplit(params).then((res) => {
    if (res.ResultCode === 105) {
      if (types.value === 0) {
        timeSplit.value = res.IntTime
      }
      if (types.value === 1) {
        timeSplit.value = res.OutTime
      }
    }
  })
}
const timeIsError = () => {
  if (carModelData.value.lastStartTime) {
    let time = carModelData.lastStartTime
    let splitTime = time.split('小时')
    let day = splitTime.length > 0 && splitTime[0]
    let minutes = splitTime.length > 1 && splitTime[1].split('分钟')[0]
    if (day === '0天0') {
      timeminutes.value = minutes
    }
  }
}
watch(types, (newValues, oldValues) => {
  if (newValues == 1 || newValues == 0) {
    setTimerSplit()
    timeIsError()
  }
})
</script>
<template>
  <div class="process-control">
    <div class="title">
      <img src="../images/processicon.png" />
      <span class="title-name">过程管控</span>
    </div>
    <div class="process-content">
      <!-- 车辆品牌 -->
      <div class="item-box">
        <div style="width: 100%; height: 100%" v-if="types === 1">
          <img
            src="../images/process1normal.png"
            class="bg"
            v-if="carModelData.InBrand === carModelData.OutBrand"
          />
          <img src="../images/process1error.png" class="bg" v-else />
        </div>
        <img src="../images/process1.png" class="bg" v-else />
        <div class="content">
          <div class="item-title">车辆品牌</div>
          <ul class="content-item" v-if="types === 0 || types === 1">
            <li>
              <span class="label">进场车型</span>
              <span class="value">{{ carModelData.InBrand }}</span>
            </li>
            <li v-if="types === 1">
              <span class="label">出场车型</span>
              <span class="value">{{ carModelData.OutBrand }}</span>
            </li>
            <li class="item-status" v-if="types === 1">
              <el-icon
                size="20"
                color="#67C23A"
                v-if="carModelData.InBrand === carModelData.OutBrand"
              >
                <CircleCheckFilled />
              </el-icon>
              <el-icon size="20" color="#E6A23C" v-else>
                <WarningFilled />
              </el-icon>
            </li>
          </ul>
          <div class="no-data" v-else>未检测到车辆</div>
        </div>
      </div>
      <img src="../images/arrow.png" class="arrow" />

      <!-- 车体人数 -->
      <div class="item-box">
        <div style="width: 100%; height: 100%" v-if="types === 1">
          <img
            src="../images/process2normal.png"
            class="bg"
            v-if="carModelData.InMenInTruck === carModelData.OutMenInTruck"
          />
          <img src="../images/process2error.png" class="bg" v-else />
        </div>
        <img src="../images/process2.png" class="bg" v-else />
        <div class="content">
          <div class="item-title">车体人数</div>
          <ul class="content-item" v-if="types === 0 || types === 1">
            <li>
              <span class="label">进场车体人数</span>
              <span class="value">{{ carModelData.InMenInTruck }}</span>
            </li>
            <li v-if="types === 1">
              <span class="label">出场车体人数</span>
              <span class="value">{{ carModelData.OutMenInTruck }}</span>
            </li>
            <li class="item-status" v-if="types === 1">
              <el-icon
                size="20"
                color="#67C23A"
                v-if="carModelData.InMenInTruck === carModelData.OutMenInTruck"
              >
                <CircleCheckFilled />
              </el-icon>
              <el-icon size="20" color="#E6A23C" v-else>
                <WarningFilled />
              </el-icon>
            </li>
          </ul>
          <div class="no-data" v-else>未检测到车辆</div>
        </div>
      </div>
      <img src="../images/arrow.png" class="arrow" />

      <!-- 过程风险 -->
      <div class="item-box">
        <div style="width: 100%; height: 100%" v-if="types === 0 || types === 1">
          <img
            src="../images/process3error.png"
            class="bg"
            v-if="timeminutes && timeSplit && timeminutes < timeSplit"
          />
          <img src="../images/process3normal.png" class="bg" v-else />
        </div>
        <img src="../images/process3.png" class="bg" v-else />
        <div class="content">
          <div class="item-title">过程风险</div>
          <ul class="content-item" v-if="types === 0">
            <li>
              <span class="label">进场时间</span>
              <br />
              <span class="value">{{ carModelData.StartTime }}</span>
            </li>
            <li>
              <span class="label">距上次离场时间</span>
              <br />
              <span class="value value-status">
                {{ carModelData.lastStartTime }}
                <el-icon color="#67C23A" v-if="carModelData.lastStartTime">
                  <CircleCheckFilled />
                </el-icon>
                <el-icon color="#E6A23C" v-else>
                  <WarningFilled />
                </el-icon>
              </span>
            </li>
            <li>
              <!-- to do -->
              <span class="label value-status">
                电子围栏检测
                <el-icon color="#67C23A" v-if="cheatStatus !== 0">
                  <CircleCheckFilled />
                </el-icon>
                <el-icon color="#E6A23C" v-else>
                  <WarningFilled />
                </el-icon>
              </span>
            </li>
          </ul>
          <ul class="content-item" v-else-if="types === 1">
            <li>
              <span class="label">出场时间</span>
              <br />
              <span class="value">{{ carModelData.EndTime }}</span>
            </li>
            <li>
              <span class="label">距进场时间</span>
              <br />
              <span class="value value-status">
                {{ carModelData.lastEndTime }}
                <el-icon color="#67C23A" v-if="carModelData.lastEndTime">
                  <CircleCheckFilled />
                </el-icon>
                <el-icon color="#E6A23C" v-else>
                  <WarningFilled />
                </el-icon>
              </span>
            </li>
            <li>
              <span class="label value-status">
                电子围栏检测
                <el-icon color="#67C23A" v-if="cheatStatus !== 0">
                  <CircleCheckFilled />
                </el-icon>
                <el-icon color="#E6A23C" v-else>
                  <WarningFilled />
                </el-icon>
              </span>
            </li>
          </ul>
          <div class="no-data" v-else>未检测到车辆</div>
        </div>
      </div>
      <img src="../images/arrow.png" class="arrow" />

      <!-- 材料信息 -->
      <div class="item-box">
        <div style="width: 100%; height: 100%" v-if="types === 1">
          <img src="../images/process4normal.png" class="bg" v-if="carModelData.MaterialName === carModelData.RecogMaterial" />
          <img src="../images/process4error.png" class="bg" v-else />
        </div>
        <img src="../images/process4.png" class="bg" v-else />
        <div class="content">
          <div class="item-title">材料信息</div>
          <ul class="content-item" v-if="types === 0 || types === 1">
            <li>
              <span class="label">输入材料信息</span>
              <span class="value">{{ carModelData.MaterialName }}</span>
            </li>
            <li>
              <span class="label">识别材料信息</span>
              <span class="value">{{ carModelData.RecogMaterial }}</span>
              <!-- <span class="value">{{carModelData.RecogMaterial}}</span> -->
            </li>
            <li class="item-status" v-if="types === 1">
              <el-icon size="20" color="#67C23A" v-if="carModelData.MaterialName === carModelData.RecogMaterial">
                <CircleCheckFilled />
              </el-icon>
              <el-icon size="20" color="#E6A23C" v-else>
                <WarningFilled />
              </el-icon>
            </li>
          </ul>
          <div class="no-data" v-else>未检测到输入信息</div>
        </div>
      </div>
      <img src="../images/arrow.png" class="arrow" />

      <!-- 验收数据量 -->
      <div class="item-box">
        <div style="width: 100%; height: 100%" v-if="types === 1">
          <img src="../images/process5normal.png" class="bg" v-if="carModelData.AUCount" />
          <img src="../images/process5error.png" class="bg" v-else />
        </div>
        <img src="../images/process5.png" class="bg" v-else />
        <div class="content">
          <div class="item-title">验收数量</div>
          <ul class="content-item" v-if="types === 0 || types === 1">
            <li>
              <span class="label">允许验收量</span>
              <span class="value">{{ carModelData.AUCount }}</span>
            </li>
            <li>
              <span class="label">开累验收量</span>
              <span class="value">{{ carModelData.AUCount }}</span>
            </li>
          </ul>
          <div class="no-data" v-else>未检测到车辆</div>
        </div>
      </div>
      <!-- <img src="../images/arrow.png" class="arrow">
      <div class="item-box">
        <img src="../images/process6.png" class="bg">
        <div class="content">
          <div class="item-title">材料信息</div>
          <div class="no-data">未检测到车辆</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.process-control {
  width: 100%;
  height: 39%;
  .title {
    width: 100%;
    height: 50px;
    background-color: #2c324d;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
      margin-top: 5px;
    }
    .title-name {
      font-size: 24px;
      font-weight: bold;
      color: #989eba;
    }
  }
  .process-content {
    width: 100%;
    height: calc(100% - 51px);
    padding: 0px 15px;
    background-color: #2c324d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item-box {
      width: 14%;
      height: calc(100% - 45px);
      position: relative;
      .bg {
        width: 100%;
        height: 100%;
      }
      .content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        .item-status {
          :deep(.el-icon) {
            width: 20px;
            height: 20px;
          }
        }
        .value-status {
          :deep(.el-icon) {
            width: 10px;
            height: 10px;
          }
        }
        .item-title {
          width: 100%;
          position: absolute;
          top: 32%;
          left: 0;
          font-size: 20px;
          color: #fff;
        }
        .content-item {
          width: 100%;
          height: 52%;
          padding-left: 0px;
          padding-top: 5px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          font-size: 14px;
          font-weight: bold;
          overflow-y: auto;
          position: absolute;
          top: 48%;
          left: 0;
          .label {
            color: #898fb1;
          }
          .value {
            color: #00ffe9;
            margin-left: 5px;
          }
          li {
            flex-grow: 1;
          }
        }
        .no-data {
          width: 100%;
          height: 50%;
          text-align: center;
          color: #898fb1;
          font-size: 14px;
          font-weight: 900;
          position: absolute;
          top: 50%;
          transform: translateY(15%);
        }
      }
    }

    .arrow {
      width: 30px;
      margin: 0 10px;
    }
  }
}
</style>
